<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition  template="template.xhtml"    >

	<ui:define name="principal">
	
<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedCar = ui.draggable;
 
        droppedCar.fadeOut('fast');
    }
</script>	
	 
		<h:form id="frmCadastroProdutoServico">
		
   			<p:growl id="message" 
			         showDetail="true" 
			         globalOnly="true"
			         sticky="false"
			         life="1200" />		
			         		
			<p:panel header="#{msg['label.servico.produto.nome.tela']}" 
			         styleClass="pnFormularioCadastro">
			         
				<p:outputLabel value="Serviço: #{cadastroServicoProdutoMB.servico.descServico}" />

				<h:panelGrid id="tela" columns="3">
					<p:column>
						<p:row>
							<p:inputText value="#{cadastroServicoProdutoMB.descricaoProduto}" 
										 size="44" />
							<p:commandLink action="#{cadastroServicoProdutoMB.pesquisaProduto()}" 
										   update="tbProdutos">
								<h:graphicImage library="imagens" 
												name="localizar.png" />
								<p:spacer height="2%" width="100%" />
							</p:commandLink>
						</p:row>
						<p:row>
							<p:outputPanel id="dropAreaServico">
							<br />
								<p:dataTable id="tbProdutos" 
								             widgetVar="dtProdutos"
											 var="linha" 
											 emptyMessage="Nenhum produto encontrado"
											 style="width: 330px;" 
											 value="#{cadastroServicoProdutoMB.listaProdutoDisponivel}" 
											 rowKey="#{linha.descProduto}"
										     selection="#{cadastroServicoProdutoMB.listaProdutosSelecionados}" 
										     selectionMode="multiple" >
						            <p:column style="width:20px">
						                <h:outputText id="iconeProdutos" 
						                              styleClass="ui-icon ui-icon-arrow-4" />
						                <p:draggable for="iconeProdutos" 
						                             revert="true" 
						                             helper="clone"/>
						            </p:column>									     
									<p:column headerText="Prdodutos">
										<h:outputText value="#{linha.descProduto}" />
									</p:column>
								</p:dataTable>
							<br />
							</p:outputPanel>
						</p:row>
						
					    <p:droppable for="dropAreaServicoProduto" 
					                 datasource="tbProdutos" 
					                 tolerance="touch" 
					                 activeStyleClass="ui-state-highlight" 
					                 onDrop="handleDrop">
					        <p:ajax listener="#{cadastroServicoProdutoMB.adiciona1}" 
					                update="frmCadastroProdutoServico" />
					    </p:droppable>						
						
					</p:column>
					<p:column>
						<p:row>
							<p:commandLink action="#{cadastroServicoProdutoMB.adiciona()}" 
							               title="Adiciona"
										   update=":frmCadastroProdutoServico" >
								<h:graphicImage library="imagens" 
								                name="adiciona.png" />
							</p:commandLink>
						</p:row>
						<br />
						<p:row>
							<p:commandLink action="#{cadastroServicoProdutoMB.adicionaTodos()}" 
										   title="Adiciona Todos"
										   update=":frmCadastroProdutoServico"    >
								<h:graphicImage library="imagens" 
								                name="adicionatodos.png" />
							</p:commandLink>
						</p:row>							
						<br />
						<br />
						<br />
						<p:row>
							<p:commandLink action="#{cadastroServicoProdutoMB.deleta()}" 
							               title="Remove"
										   update=":frmCadastroProdutoServico" >
								<h:graphicImage library="imagens" name="remove.png" />
							</p:commandLink>
						</p:row>							
						<br />		
						<p:row>
							<p:commandLink action="#{cadastroServicoProdutoMB.deletaTodos()}" 
							               title="Remove Todos"
										   update=":frmCadastroProdutoServico" >
								<h:graphicImage library="imagens" 
								                name="removetodos.png" />
							</p:commandLink>
						</p:row>
					</p:column>
					<p:column>
						<p:outputPanel id="dropAreaServicoProduto">
						<br />
							<p:dataTable id="tbProdutosServico" 
							             widgetVar="dtProdutosServico"
								         emptyMessage="Nenhum Produto para este Serviço"
								         style="width: 330px;" 
								         var="linha"
								         value="#{cadastroServicoProdutoMB.listaServicoProduto}"
										 rowKey="#{linha.produto.descProduto}"
									     selection="#{cadastroServicoProdutoMB.listaServicoProdutoSelecionados}" 
									     selectionMode="multiple" >
					            
					            <p:column style="width:20px">
					                <h:outputText id="iconeProdutosServico" 
					                              styleClass="ui-icon ui-icon-arrow-4" />
					                <p:draggable for="iconeProdutosServico" 
					                             revert="true" 
					                             helper="clone"/>
					            </p:column>									     
					           
								<p:column headerText="Produtos Serviço">
									<h:outputText value="#{linha.produto.descProduto}" />
								</p:column>
							</p:dataTable>
						<br />
						</p:outputPanel>
						
					    <p:droppable for="dropAreaServico" 
					                 datasource="tbProdutosServico" 
					                 tolerance="touch" 
					                 activeStyleClass="ui-state-highlight" 
					                 onDrop="handleDrop">
					        <p:ajax listener="#{cadastroServicoProdutoMB.deleta1}" 
					                update="frmCadastroProdutoServico" />
					    </p:droppable>							
						
					</p:column>
				</h:panelGrid>
				
				<h:panelGrid columns="1"
			      	         styleClass="pgBotoes" >
					<p:column>
						<p:commandButton value="Voltar"
								         action="cadastroServico"   />
					</p:column>
				</h:panelGrid>					
    				
			</p:panel>
			
		</h:form>
		
	</ui:define>
</ui:composition>
</html>